<style>
.el-table--border th.el-table__cell, .el-table__fixed-right-patch {
  background-color: #333333;
  color: #ffffff;
}

.el-input__inner {
  border-radius: 93px;
  border-color: green;
}

.table {
  margin-top: 10px;
}

.el-table .warning-row {
  background: oldlace;
}

.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

.el-form-item__label {
  color: #99a9bf;
}
</style>

<template>
  <div class="bodyDiv">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }" style="font-size: 19px;">
        <i class="el-icon-s-home"></i> 个人中心
      </el-breadcrumb-item>
      <el-breadcrumb-item style="font-size: 17px">返乡报备管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="margin: 24px 0 12px 0">
      <el-divider></el-divider>
    </div>
    <el-button :type="this.showCurrentList==1?'warning':''" round @click="showUnauditedPage1(0)">未审核</el-button>
    <el-button :type="this.showCurrentList==2?'success':''" round @click="showAuditedPage1(1)">已审核</el-button>

    <!--  表格  -->
    <el-table
        border
        :data="reportData"
        style="width: 100%;margin-top:10px"
        :row-class-name="tableRowClassName">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form style="text-align: center" label-position="left" inline class="demo-table-expand">
            <el-form-item label="姓名">
              <span style="margin-right:25px">{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="现住址">
              <span style="margin-right:25px">{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="出发地点">
              <span style="margin-right:25px">{{ props.row.startPlace }}</span>
            </el-form-item>
            <el-form-item label="返乡时间">
              <span style="margin-right:25px">{{ props.row.returnDate }}</span>
            </el-form-item>
            <el-form-item label="十五天轨迹">
              <span style="margin-right:25px">{{ props.row.halfMonthPast }}</span>
            </el-form-item>
            <el-form-item label="经过疫区">
              <span style="margin-right:25px">{{ props.row.throughDangerArea }}</span>
            </el-form-item>
            <el-form-item label="身体状态">
              <span style="margin-right:25px">{{ props.row.bodyStatus }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="ID"
          prop="id" width="55" header-align="center" align="center">
      </el-table-column>
      <el-table-column
          label="报备时间"
          prop="gmtCreate" header-align="center" align="center">
      </el-table-column>
      <el-table-column
          label="用户名"
          prop="username" header-align="center" align="center">
      </el-table-column>
      <el-table-column
          label="手机号"
          prop="phone" header-align="center" align="center">
      </el-table-column>
      <el-table-column
          label="体温"
          prop="temperature" header-align="center" align="center">
      </el-table-column>
      <el-table-column prop="nucleicReport" label="核酸报告" header-align="center" align="center" width="200">
        <template slot-scope="scope">
          <img
              style="width: 100px; height: 100px"
              :src="scope.row.nucleicReport==null?'':require('../img/user/'+scope.row.nucleicReport)"/>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true"
                       label="审核回复" header-align="center" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.reviewResponse=='0'?'warning':'primary'">
            <span>{{ scope.row.reviewResponse == '0' ? '待审核' : scope.row.reviewResponse }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template slot-scope="scope">
          <el-button round type="primary" @click="passResponse(scope.row)">审核回复</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <div class="block" align="center" style="margin-top: 10px;margin-bottom: 15px">
      <el-pagination
          v-show="UnauditedShow"
          background
          @current-change="handleCurrentChange"
          :current-page.sync="Unaudited.page"
          :page-size="Unaudited.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
      <el-pagination
          v-show="AuditedShow"
          background
          @current-change="handleCurrentChange1"
          :current-page.sync="Audited.page"
          :page-size="Audited.pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showCurrentList: 0,
      UnauditedShow: false,
      AuditedShow: false,
      reportData: [],
      totalCount: 0,
      Unaudited: {
        pageSize: 4,
        page: 1,
      },
      Audited: {
        pageSize: 4,
        page: 1,
      },
      UpdateResponse:{
        response:''
      },
    }
  },
  methods: {
    //表格状态
    tableRowClassName({row, rowIndex}) {
      if (row.temperature >= 37) {
        return 'warning-row';
      }
      return '';
    },

    //展示已审核报备第一页
    showAuditedPage1() {
      this.Audited.page = 1;
      this.loadListAudited();
    },
    //展示未审核报备第一页
    showUnauditedPage1() {
      this.Unaudited.page = 1;
      this.loadListUnaudited();
    },

    //展示当前列表
    showCurrentReportList() {
      if (this.showCurrentList == 1) {
        this.showCurrentList = 0;
        this.loadListUnaudited();
      } else if (this.showCurrentList == 2) {
        this.showCurrentList = 0;
        this.loadListAudited();
      }
    },

    //提交通过审核
    passResponse(report) {
      this.$prompt('请输入审核回复信息', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.UpdateResponse.response = value;
        let data = this.qs.stringify(this.UpdateResponse);

        let url = 'http://localhost:8081/returnHome/' + report.id + '/updateResponse';
        console.log('根据返乡报备id提交审核回复请求的url是' + url);
        this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
            .post(url,data).then((response) => {
          let responseBody = response.data;
          if (responseBody.state == 20000) {
            this.$notify.success({
              title: '提示',
              message: '提交审核回复成功！',
              showClose: true,
              position: 'top-right'
            });
            this.loadListUnaudited();
          } else {
            this.$notify.warning({
              title: '提示',
              message: responseBody.message,
              showClose: true,
              position: 'top-right'
            });
            this.loadListUnaudited();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    //展示报备未审核列表
    loadListUnaudited() {
      this.showCurrentList = 1;
      this.UnauditedShow = true;
      this.AuditedShow = false;
      let url = 'http://localhost:8081/returnHome/0/' + this.Unaudited.page + '/' + this.Unaudited.pageSize;
      console.log('展示报备未审核列表请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.reportData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
          this.loadListAudited();
        }
      })
    },

    //展示报备已审核列表
    loadListAudited() {
      this.AuditedShow = true;
      this.UnauditedShow = false;
      let url = 'http://localhost:8081/returnHome/1/' + this.Audited.page + '/' + this.Audited.pageSize;
      console.log('展示报备已审核列表请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('adminJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.showCurrentList = 2;
          this.reportData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-left'
          });
        }
      })
    },

    handleCurrentChange(val) {
      this.Unaudited.page = val;
      this.showCurrentReportList();
      console.log(`当前页: ${val}`);
    },
    handleCurrentChange1(val) {
      this.Audited.page = val;
      this.showCurrentReportList();
      console.log(`当前页: ${val}`);
    },
  },
  mounted() {
    this.loadListUnaudited();
  }
}
</script>